<script setup>
// 第三方模块
import { computed } from "vue";
import OrderCard from "@/components/order/OrderCard.vue";
import useOrderStore from "@/stores/order";

const orderStore = useOrderStore();

// 获取订单信息
const userOrderList =computed(()=>{
  return orderStore.orderList.filter(item => item.user=="zhangsan")
})

</script>

<template>
  <div class="order_list">
    <div class="order_list_header">我的订单</div>
    <div class="order_list_content">
      <div class="order_list_content_item" v-for="(item ,index) in userOrderList" :key="index">
        <OrderCard :orderInfo="item"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.order_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0.5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: 0.08rem 0.18rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: 0.24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &_content {
    margin-top: 0.58rem;
  }
}
</style>